<template>
    <div>
    <el-table
    :data="orders"
    style="width: 100%"
    max-height="450">
    <el-table-column
      prop="order_number"
      label="订单编号"
      width="200">
    </el-table-column>
    <el-table-column
    prop="order_price"
      label="订单价格"
      width="60">
    </el-table-column>
    <el-table-column
      prop="order_addr"
      label="收货地址"
      width="250">
    </el-table-column>
    <el-table-column
      prop="goods"
      label="订单商品"
      width="460">
    </el-table-column>
    <el-table-column
      prop="payStatus"
      label="订单状态"
      width="80">
      <template slot-scope="scope">
        <span v-if="scope.row.payStatus==0">未支付</span>
        <span v-if="scope.row.payStatus==1">已支付</span>
        <span v-if="scope.row.payStatus==2">已发货</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="order_time"
      label="下单时间"
      width="180">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="90">
      <template slot-scope="scope">
        <el-button
          type="success" round
          @click.native.prevent="deliverRow(scope.$index, scope.row)"
          size="small"
          :disabled="scope.row.payStatus=='2'?true:false"
          >
          {{ scope.row.payStatus== '2' ? '已发货' : '发货' }}
        </el-button>

      </template>
    </el-table-column>
  </el-table>
  
    </div>
</template>
<script>
export default {
   name:'orderDeliver',
   data(){
    return{
        
    }
   },
   mounted(){
      // 发请求得到所有订单
      this.$store.dispatch('getOrder')
      // 安排发货 更改payStatus 0未支付1已支付2已发货
    },
    computed:{
      // 得到所有订单
      orders(){
        return this.$store.state.goods.orders
      },
    },
    methods:{
      //发货 将订单状态改为2
      // eslint-disable-next-line 
      deliverRow(index, rows) {
        // console.log(index);
        let orderNumber = rows.order_number
        // console.log(orderNumber);
        // 发请求将订单状态改为2
        this.$store.dispatch('deliverGoods',orderNumber)
        // 将发货按钮禁用 在标签中通过disabled设置
      }
    }
}
</script>